<template>
	<view class="flex-col flex-auto group">
		  <text class="self-center text_2" v-if="type==1000">手机号登录</text>
		  <text class="self-center text_2" v-if="type==2000">邮箱登录</text>
		  <!-- 手机号登录 -->
		  <view class="" v-if="type==1000">
			<view class="flex-col justify-start items-start text-wrapper">
			  <input type="text" class="font_1" @input="onInput" placeholder="请输入手机号" v-model="phoneNumber">
			</view>
			<!-- svg画线 -->
			<view style="height: 1px;">
				<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
				  <line x1="0" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:0.2" />
				</svg>
			</view>
			
			<view class="flex-col justify-start items-start text-wrapper_2">
			  <input type="text" password="true" class="font_1" @input="onInput"  placeholder="请输入密码" v-model="phonePassword">
			</view>
			
			<!-- svg画线 -->
			<view style="height: 1px;">
				<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
				  <line x1="0" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:0.2" />
				</svg>
			</view>
		  </view>
		  <!-- 账号登录 -->
		  <view class="" v-if="type==2000">
			<view class="flex-col justify-start items-start text-wrapper">
			  <input type="text" class="font_1" @input="onInput" placeholder="请输入邮箱" v-model="idNumber">
			</view>
			<!-- svg画线 -->
			<view style="height: 1px;">
				<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
				  <line x1="0" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:0.2" />
				</svg>
			</view>
			<view class="flex-col justify-start items-start text-wrapper_2">
			  <input type="text" password="true" class="font_1" @input="onInput" placeholder="请输入密码" v-model="idPassword">
			</view>
			<!-- svg画线 -->
			<view style="height: 1px;">
				<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
				  <line x1="0" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:0.2" />
				</svg>
			</view>
		  </view>
		  
		  <view class="self-start font_1 text_3" @click="type=2000" v-if="type==1000">用邮箱登录</view>
		  <view class="self-start font_1 text_3" @click="type=1000" v-if="type==2000">用手机号登录</view>
		  <!-- 登录按钮1 -->
		  <view class="flex-col justify-start items-center button" v-if="btnShow">
			  <button class="font_1 text_4" @click="onSubmit">登 录</button>
		  </view>
		  <!-- 登录按钮2 -->
		  <view class="flex-col justify-start items-center button2" v-else>
			  <button class="font_1 text_66">登 录</button>
		  </view>
		  
		</view>
</template>


<script>
import { $http } from '@escook/request-miniprogram'
	export default {
		components:{
			
		},
		data() {
			return {
				type: 1000,						//判断登录类型手机登录或账号登录
				phoneNumber:'',					//手机账号
				phonePassword:'',				//手机密码
				idNumber:'',					//账号
				idPassword:'',					//账号密码
				btnShow:false,					//判断登录按钮显示隐藏
				timeOut:null,					//添加定时器
				LoginDto:{
					loginKey:'',
					password:''
				}
			}
			
		},
		onLoad() {
 
		},
		created() {
			
		},
		// 方法
		methods: {
			// 判断显示登录按钮
			onInput() {
				this.timeOut && clearTimeout(this.timeOut)
				this.timeOut = setTimeout(() => {
					if (this.type == 1000) {
						if (this.phoneNumber && this.phonePassword) {
							this.btnShow = true;
						} else {
							this.btnShow = false;
						}
					} else {
						if (this.idNumber && this.idPassword) {
							this.btnShow = true;
						} else {
							this.btnShow = false;
						}
					}
				}, 100);
			},
			// 点击登录
			onSubmit(){
				// 判断登录方式为手机号登录
				if(this.type==1000){
					// 判断验证手机号
					if(!this.phoneNumber){
						uni.showToast({
							title: '请输入手机号',
							icon: 'none',
						});
						return;
					}
					const phoneNumber= /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
					if(!phoneNumber.test(this.phoneNumber)){
						uni.showToast({
							title: '手机号输入不正确',
							icon: 'none',
						});
						return;
					}
					// 判断验证手机密码
					if(!this.phonePassword){
						uni.showToast({
							title: '请输入密码',
							icon: 'none',
						});
						return;
					}
					this.LoginDto.loginKey=this.phoneNumber
					this.LoginDto.password=this.phonePassword
					$http.post("/user/login",this.LoginDto).then((res)=>{
						uni.showToast({
							title: '正在登录',
							icon: 'loading',
						})
						uni.setStorageSync("authorization",res.data.data.data.tokenValue)
						uni.setStorageSync("userId",res.data.data.data.loginId)
						//跳转首页
					})
					
					
				}else{
					const email= /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
					// 判断验证邮箱
					if(!email.test(this.idNumber) ){
						uni.showToast({
							title: '请输入邮箱正确的',
							icon: 'none',
						});
						return;
					}
					
					if(!this.idNumber){
						uni.showToast({
							title: '请输入邮箱',
							icon: 'none',
						});
						return;
					}
					// 判断验证账号密码
					if(!this.idPassword){
						uni.showToast({
							title: '请输入邮箱密码',
							icon: 'none',
						});
						return;
					}
					this.LoginDto.loginKey=this.idNumber
					this.LoginDto.password=this.idPassword
					$http.post("/user/login",this.LoginDto).then((res)=>{
						uni.showToast({
							title: '正在登录',
							icon: 'loading',
						})
						uni.setStorageSync("authorization",res.data.data.data.tokenValue)
						uni.setStorageSync("userId",res.data.data.data.loginId)
						//跳转首页
					})
					
				}
			},
			
			
 
			
		}
	}
</script>

<style>
 @import url("../../css/login.css");
</style>
